<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="500px">
        <el-card style="max-width: 480px; margin-top: 20px">
          <template #header>
            <div class="card-header">
              <span>高级数据库</span>
            </div>
          </template>
          <div class="text item">
            <div class="mb-4">
              <el-button type="success" @click="showInfo('database')">查看详情</el-button>
            </div>
          </div>
        </el-card>

        <el-card style="max-width: 480px; margin-top: 40px">
          <template #header>
            <div class="card-header">
              <span>机器学习</span>
            </div>
          </template>
          <div class="text item">
            <div class="mb-4">
              <el-button type="success" @click="showInfo('machineLearning')">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-aside>
      <el-main>
        <el-card style="max-width: 1080px; min-height: 600px">
          <template #header>
            <div class="card-header">
              <span>{{ currentTitle }}</span>
            </div>
          </template>
          <div class="text item">
            <div v-if="currentInfo === 'database'">
              随着网络和多媒体技术的迅猛发展，数据库的应用也得到了更广泛的拓展。数据库进入了一个新的时期，现代数据库技术融合多种技术，数据库新技术正在不断发展。
              学习者掌握：
              <p>1）数据库预备和基础知识；</p>
              <p>2）数据库系统方面的技术延伸；</p>
              <p>3）基于分布环境下的数据库技术；</p>
              <p>4）数据库研究与应用的较深入的课题；</p>
              <p>5）数据库的协同工作技术和综合应用实例。</p>
            </div>

            <div v-if="currentInfo === 'machineLearning'">
              机器学习是人工智能的重要分支。它是研究如何从数据中获取知识并做出预测的学科。
              学习者掌握：
              <p>1）机器学习的基本概念和算法；</p>
              <p>2）监督学习与非监督学习的区别；</p>
              <p>3）常用的机器学习模型与应用场景；</p>
              <p>4）模型评估与优化的方法；</p>
              <p>5）深度学习的基本原理与应用实例。</p>
            </div>
          </div>
          <el-divider></el-divider>
          <h1>评论区</h1>
          <el-divider></el-divider>
          <div>
            <el-input
              v-model="input"
              style="width: 240px; margin-left: auto"
              placeholder="写点什么..."
            />
            <el-button type="success" @click="addnewComment" :disabled="isSubmitting">
              发表评论
            </el-button>
            <div v-for="(comment, index) in commentList" :key="index">
              <el-descriptions title="">
                <el-descriptions-item>{{ comment.username }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="">
                <el-descriptions-item>-------{{ comment.content }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="">
                <el-descriptions-item>{{ comment.createTime}}</el-descriptions-item>
              </el-descriptions>
              <el-divider></el-divider>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { throttle } from 'lodash'
import { addComment, getComments } from '@/api/comment'
import { ref } from 'vue'


import { ElMessage } from 'element-plus'
const input = ref('')
const commentList = ref([])
const isButtonDisabled = ref(false);
// 定义方法, 防抖函数
const addnewComment = throttle(async () => {
  if (input.value.trim() === '') {
    ElMessage.error('评论内容不能为空');
    return;
  }

  isButtonDisabled.value = true;  // 禁用按钮
  try {
    let result = await addComment({
      username: '用户名称',
      content: input.value,
      taskid: 1,
    })
    console.log("1")
    if (result) {
      // 从 getComments 响应中获取评论数据
      const response = await getComments() // 获取评论
      console.log("2")
      if (response && response.data) {
        // 确保响应有效并且包含 data 属性
        commentList.value = response.data
      } else {
        commentList.value = []
      }
      input.value = '' // 清空输入框
      ElMessage.success(result.msg ? result.msg : '评论成功')
    }
  } catch (error) {
    ElMessage.error('提交评论失败')
  }
},5000);

import { onMounted } from 'vue';
onMounted(async () => {
  try {
    const response = await getComments();
    if (response && response.data) {
      commentList.value = response.data;
    } else {
      commentList.value = [];
    }
  } catch (error) {
    ElMessage.error('获取初始评论数据失败');
  }
})




//下面为测试用途


// 定义状态
const currentInfo = ref('database'); // 默认显示“高级数据库”的信息
const currentTitle = ref('高级数据库'); // 默认标题

// 定义方法
const showInfo = (infoType) => {
  currentInfo.value = infoType;
  currentTitle.value = infoType === 'database' ? '高级数据库' : '机器学习'; // 根据点击更新标题
};


</script>

<style scoped></style>
